<template>
  <div class="content">
    <el-form :inline="true" :model="queryForm" class="form-inline">
      <el-form-item label="名称">
        <el-input v-model="queryForm.name" placeholder="请输入名称" clearable />
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="loadCategoryList">查询</el-button>
      </el-form-item>
    </el-form>

    <div style="margin-bottom:10px;">
      <el-button type="primary" @click="handleOpenCategoryDialog(null)">添加分类</el-button>
    </div>
    <el-table :data="categoryList" stripe>
      <el-table-column prop="name" label="名称" />
     
      

      
      <el-table-column label="操作" >
        <template #default="scope">
          <el-button size="small" style="margin-left: 2px;" @click="handleOpenCategoryDialog(scope.row)">编辑</el-button>
          <el-button size="small" @click="handleDelete(scope.row.id)">删除</el-button>
          

        </template>
      </el-table-column>

    </el-table>

    <div style="margin-top: 10px;">
      <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
      />
    </div>
  </div>

  <!--用户对话框-->
  <el-dialog v-model="dialogFormVisible" :title="categoryForm.id?'编辑分类':'添加分类'">
    <el-form ref="categoryFormRef" :model="categoryForm" :rules="categoryFormRule">
      <el-form-item label="名称" prop="name">
        <el-input placeholder="请输入名称" v-model="categoryForm.name" autocomplete="off"/>
      </el-form-item>
     
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关&nbsp;&nbsp;闭</el-button>
        <el-button type="primary" @click="handleSave">提&nbsp;&nbsp;交</el-button>
      </span>
    </template>
  </el-dialog>


</template>

<script setup>  
import { reactive, ref } from "vue";  
import { getCategoryList, saveCategory, deleteCategoryById } from "@/api/category";  
import { ElMessageBox, ElMessage } from "element-plus";  
  
const queryForm = reactive({ name: "", page: 1, pageSize: 10 });  
let categoryList = reactive([]);  
let total = ref(0);  
  
let dialogFormVisible = ref(false);  
let categoryFormRef = reactive(null);  
const categoryForm = reactive({ id: null, name: "", sort: "" });  
let categoryFormRule = reactive({  
  name: [  
    {  
      required: true,  
      trigger: 'blur',
      message: '请输入版本名称'  
    }  
  ],  
 
});  
  
// 打开添加、编辑分类对话框  
let handleOpenCategoryDialog = (category) => {  
  categoryForm.id = null;  
  categoryForm.name = null;  
 
  
  if (category) {  
    categoryForm.id = category.id;  
    categoryForm.name = category.name;  
    
  }  
  dialogFormVisible.value = true;  
};  
  
// 处理添加、编辑分类  
let handleSave = () => {  
  // 判断是否校验通过  
  if (categoryFormRef && typeof categoryFormRef.validate === 'function') {  
    categoryFormRef.validate((valid) => {  
      if (valid) {  
        saveCategory(categoryForm.id, categoryForm).then((resp) => {  
          dialogFormVisible.value = false;  
          if (resp.code == 200) {  
            ElMessage.success(resp.msg);  
          } else {  
            ElMessage.error(resp.msg);  
          }
          loadCategoryList();  
        });  
      }  
    });  
  }  
};  
  
// 处理删除操作  
let handleDelete = (categoryId) => {  
  // 确认对话框  
  ElMessageBox.confirm(  
    "是否删除?",  
    '提示',  
    {  
      confirmButtonText: '确定',  
      cancelButtonText: '取消',  
      type: 'warning',  
    }  
  ).then(() => {  
    // 发送请求  
    deleteCategoryById(categoryId).then(resp => {  
      if (resp.code == 200) {  
        loadCategoryList();  
      } else {  
        ElMessage.error(resp.msg);  
      }  
    });  
  }).catch(() => {  
  });  
};  
  

  
// 定义方法  
let loadCategoryList = () => {  
  // 准备数据  
  getCategoryList(queryForm).then(resp => {  
    if (resp.msg === '成功') { // 假设成功时 msg 为 '成功'  
      categoryList.length = 0;  
      categoryList.push(...resp.data);  
      total.value = resp.total;  
    } else {  
      ElMessage.error(resp.msg); // 显示错误信息  
      categoryList.length = 0;  
      total.value = 0;  
    }  
  }).catch(error => {  
    // 处理请求错误  
    ElMessage.error('加载分类列表失败');  
    console.error('加载分类列表出错:', error);  
    categoryList.length = 0;  
    total.value = 0;  
  });  
};  
  
let handleSizeChange = (pageSize) => {  
  queryForm.pageSize = pageSize;  
  loadCategoryList();  
};  
  
let handlePageChange = (page) => {  
  queryForm.page = page;  
  loadCategoryList();  
};  
  
loadCategoryList();  
</script>
<style scoped>

</style>
